<template>
  <el-card class="box-card">
          <div slot="header"
               class="clearfix">
            <span class="title">最新事件</span>
            <el-button style="float: right; padding: 3px 0"
                       type="text">查看更多</el-button>
          </div>
          <ul class="list-unstyled list-unstyled-border">
            <li v-for="(item,index) in this.records"
                :key="index"
                class="event">
              <!-- <img class="mr-3 rounded-circle" width="50" src="../../../public/static/img/logo2.jpg" alt="avatar"> -->
              <div class="event-body">
                <div class="float-right"><small>{{item.time|formatTime}}</small></div>
                <div class="event-title">{{item.name}}</div>
                <small>{{item.behavior}}</small>
              </div>
            </li>
          </ul>
        </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
// import PanThumb from '@/components/PanThumb'
// import Mallki from '@/components/TextHoverEffect/Mallki'

export default {
  // components: { PanThumb, Mallki },
  // components: { Mallki },

  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      records: [
        {
          name: '用户1',
          behavior: '进入了库房',
          time: '1588965300000'
        },
        {
          name: '用户2',
          behavior: '进入了库房',
          time: '1588855000000'
        },
        {
          name: '用户3',
          behavior: '进入了库房',
          time: '1588714000000'
        },
        {
          name: '用户4',
          behavior: '进入了库房',
          time: '1588613000000'
        },
        // {
        //   name: '用户5',
        //   behavior: '进入了库房',
        //   time: '1588512000000'
        // }
        // {
        //   name: 'man6',
        //   behavior: '进入了库房',
        //   time: '1588747000000'
        // },
        // {
        //   name: 'man7',
        //   behavior: '进入了库房',
        //   time: '1588746000000'
        // }
      ],
      statisticsData: {
        article_count: 1024,
        pageviews_count: 1024
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  }
}
</script>

<style lang="scss" >
.box-card-component{
  .el-card__header {
    padding: 0px!important;
  }
}
</style>
<style lang="scss" scoped>
/* list unstyled */
  .list-unstyled-border li {
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 10px;
    margin-bottom: 10px;
    list-style-type: none;
  }
  .list-unstyled-border li .custom-checkbox {
    margin-right: 15px;
    margin-top: 13px;
  }
  .list-unstyled-noborder li:last-child {
    border-bottom: none;
  }

  .event-title {
    margin-top: 0;
    // margin-bottom: 5px;
    font-weight: 700;
    color: rgb(218, 16, 16);
  }
  .title {
    font-size: 25px;
  }
  .float-right {
    float: right !important;
  }
</style>
